<template>
    <el-button :icon="Plus" plain type="primary" @click="addClick"/>
    <div class="dialog">
        <el-dialog v-model="dialogVisible" center width="20%" @close="cancel(formRef)">
            <el-alert :closable="false" center title="志愿者密码默认均为123456" type="success"/>
            <div class="form" style="width: 80%;margin: 10px auto 0">
                <el-form ref="formRef" :model="form" :rules="rules" label-width="0">
                    <el-form-item prop="username">
                        <el-input v-model.trim="form.username" placeholder="请输入志愿者姓名"/>
                    </el-form-item>
                    <el-form-item prop="idCard">
                        <el-input v-model.trim="form.idCard" placeholder="请输入志愿者身份证号码"/>
                    </el-form-item>
                    <el-form-item prop="telephone">
                        <el-input v-model.trim="form.telephone" placeholder="请输入志愿者电话号码"/>
                    </el-form-item>
                    <el-form-item prop="areaId">
                        <el-select v-model="form.areaId" placeholder="请输入志愿者服务区域" style="width: 100%">
                            <el-option v-for="item in option" :key="item.areaId" :label="`${item.areaName}区`"
                                       :value="item.areaId"/>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="span">
                  <el-button @click="cancel(formRef)">
                      取消
                  </el-button>
                  <el-button type="primary" @click="submit(formRef)">
                    提交
                  </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
// OK 2023-4-17 21:43:添加志愿者
import { Plus } from '@element-plus/icons-vue'
import { onBeforeMount, onUnmounted, ref } from 'vue'
import { Area, Vol } from '@/ts/type'
import { FormInstance } from 'element-plus'
import { AreaService } from '@/api'
import { rules } from '@/config/formConfig'
import { Message } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'

const dialogVisible = ref<boolean>(false)
const form = ref<Vol>({})
const option = ref<Area[]>([])
const formRef = ref<FormInstance>()
const getOptions = () => {
  AreaService.getOptions().then(res => {
    const { data } = res
    option.value = data
  })
}
const addClick = () => {
  dialogVisible.value = true
}
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async valid => {
    if (valid) {
      await EventBus.emit('addVolForm', form.value)
      dialogVisible.value = false
    } else {
      Message.error('请重新检查表单数据')
    }
  })
}
const cancel = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  dialogVisible.value = false
}
onBeforeMount(() => {
  getOptions()
})
onUnmounted(() => {
  EventBus.off('addVolForm')
})
</script>

<style lang='scss' scoped>
.form {
  padding: 0 20px;
}

.span {
  display: flex;
  justify-content: space-evenly;
}
</style>